{% extends "airflow/dag.html" %}

{% block head_css %}
{{ super() }}
<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
{{ super() }}
<form method="get">
    <div class="form-inline">
        Run:<input type="hidden" value="{{ dag.dag_id }}" name="dag_id">
	{{ form.execution_date(class_="form-control") | safe }}
	<input type="submit" value="Go" class="btn btn-default" action="" method="get">
    </div>
</form>
<div id="container"></div>
{% endblock %}

{% block tail %}
    {{ super() }}
    <script src="{{ url_for('static', filename='d3.v3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='highcharts.js') }}"></script>
    <script src="{{ url_for('static', filename='highcharts-more.js') }}">
    </script>
    <script src="{{ admin_static.url(
      filename='vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ admin_static.url(filename='admin/js/form-1.0.0.js') }}"></script>
    <script>
    $( document ).ready(function() {
      execution_date = '{{ execution_date }}';
      hc = {{ hc|safe }};
      hc.plotOptions.series.point = {
        events: {
            click: function(p){
                call_modal(this.category, execution_date);
            }
        }
      };

      hc.tooltip = {
        formatter: function() {
          duration = new Date(this.point.high - this.point.low);
          return "From " +
            Highcharts.dateFormat('%H:%M:%S', new Date(this.point.low)) +
            " to " +
            Highcharts.dateFormat('%H:%M:%S', new Date(this.point.high)) +
            "<br>Duration: " +
            Highcharts.dateFormat('%H:%M:%S', new Date(duration));
        }
      }
      $("#container").highcharts(hc);

      // We blur task_ids in demo mode
      if ("{{ demo_mode }}" == "True") {
          d3.select("svg")
            .append("filter")
            .attr("id", "blur-effect-1")
            .append("feGaussianBlur")
            .attr("stdDeviation", 3);
          d3.selectAll("g.highcharts-xaxis-labels text").style("filter", "url(#blur-effect-1)");
      }
    });
    </script>

{% endblock %}
